<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/nine.css">
</head>

<body>
    <div class="root">
        <div class="one">
            <img src="./创家盛典/img/jb.png" alt="">
            <img src="./创家盛典/img/kind.png" alt="">
            <img src="./创家盛典/images/pageseven/t3.png" alt="">
            <img src="./创家盛典/images/pageseven/t4.png" alt="">
            <img src="./创家盛典/img/block9.png" alt="">
            <img src="./创家盛典/images/pageseven/t6.png" alt="">
            <img src="./创家盛典/images/pageseven/t7.png" alt="">
            <img src="./创家盛典/images/pageseven/t8.png" alt="">
        </div>
        <div class="two">
            <img src="./创家盛典/img/ellemen.png" alt="">
            <img src="./创家盛典/img/graduation.png" alt="">
            <img src="../创家盛典/img/36kr.png" alt="">
            <img src="../创家盛典/img/bank.png" alt="">
            <img src="../创家盛典/img/aiqiyi.png" alt="">
            <img src="../创家盛典/img/parnter.png" alt="">
        </div>
        <div class="bottom"><img src="./创家盛典/images/pageone/slide.png" alt=""></div>
    </div>
</body>

</html>
<script src="../js/jquery-3.4.1.min.js"></script>
<script src="../js/touch-0.2.14.min.js"></script>
<script src="../js/jqfloat.min.js"></script>
<script>
    touch.on(window, "swipeup", function() {
        window.open("./ten.html", '_self');
    });

    function dm() {
        // console.log("hh")
        $(".bottom img").animate({
            bottom: 3 + "rem"
        }, 500, )

        $(".bottom img").animate({
            bottom: 2 + "rem"
        }, 500)

    };
    dm();
    setInterval(dm, 1000);
    $(".one img:nth-child(1)").animate({
        top: 3 + "rem",
        left: 2 + "rem",
    }, 500)
    $(".one img:nth-child(5)").animate({
        top: 3 + "rem",
        left: 12 + "rem",
    }, 500)
    $(".one img:nth-child(2)").animate({
        top: 3 + "rem",
        left: 7 + "rem",
    }, 500)
    $(".one img:nth-child(3)").animate({
        top: 2 + "rem",
        left: -4 + "rem",
    }, 500)
    $(".one img:nth-child(4)").animate({
        top: 2 + "rem",
        left: -3 + "rem",
    }, 500)
    $(".one img:nth-child(6)").animate({
        bottom: 2 + "rem",
        left: 21 + "rem",
    }, 500)
    $(".one img:nth-child(7)").animate({
        bottom: 0 + "rem",
        left: -2 + "rem",
    }, 500)
    $(".one img:nth-child(8)").animate({
        bottom: 20 + "rem",
        right: 20 + "rem",
    }, 500)
    setTimeout(function() {
        $(".two img:nth-child(1)").animate({
            opacity: 1
        }, 1000)
    }, 1000)
    setTimeout(function() {
        $(".two img:nth-child(6)").animate({
            left: 6 + "rem"
        }, 1000)
    }, 1500)
    setTimeout(function() {
        $(".two img:nth-child(2)").animate({
            opacity: 1
        }, 1000)
    }, 2000)
    setTimeout(function() {
        $(".two img:nth-child(3)").animate({
            top: 30.84 + "rem"
        }, 1000)
    }, 2500)
    setTimeout(function() {
        $(".two img:nth-child(4)").animate({
            top: 30.56 + "rem"
        }, 1000)
    }, 3000)
    setTimeout(function() {
        $(".two img:nth-child(5)").animate({
            top: 30.66 + "rem"
        }, 1000)
    }, 3500)
</script>